<template>
  <div class="container">
    <normal-title
      title='搜索'
      :back="true"
    ></normal-title>
    <div class="row">
      <div style="position:relative">
        <img
          class="icon"
          src="../../images/search_icon.png"
          mode="aspectFit"
        >
        <input
          type="text"
          placeholder="快速搜索你想要的内容"
          placeholder-class="placeholder-style"
          focus
          confirm-type="search"
          @confirm="getSearchRes"
          v-model="content"
        >
      </div>
      <p
        class="text"
        @click="getSearchRes"
      >搜索</p>
    </div>
    <div class="row">
      <p class="history">历史搜索</p>
    </div>
    <div class="row tags">
      <div
        class="tag"
        v-for="(item,index) in historyTexts"
        :key="index"
        @click="quickInput(index)"
        :class="activedItem===index?'tag tagSelected':'tag'"
      >{{item}}</div>
    </div>
  </div>
</template>

<script>
import NormalTitle from '@/components/NormalTitle'
export default {
  components: {
    NormalTitle
  },
  data () {
    return {
      content: '',
      historyTexts: [],
      activedItem: null
    }
  },
  methods: {
    async getSearchRes () {
      var arr = wx.getStorageSync('historyTexts') || []
      var hasKeyword = arr.indexOf(this.content) === -1
      var hasContent = this.content.replace(/\s+/g, '') !== ''
      if (hasKeyword && hasContent) {
        arr.unshift(this.content)
        if (arr.length > 10) {
          arr.pop()
        }
        this.historyTexts = arr
        wx.setStorageSync('historyTexts', arr)
      }
      if (hasContent) {
        wx.navigateTo({
          url: '/pages/wines/main?title=搜索结果&keyword=' + this.content
        })
        this.content = ''
      }
    },
    quickInput (index) {
      this.content = this.historyTexts[index]
      this.activedItem = index
    }
  },
  mounted () {
    this.historyTexts = wx.getStorageSync('historyTexts')
  }
}
</script>

<style>
.placeholder-style {
  color: #7f7f7f;
  font-size: 30rpx;
}
</style>

<style scoped lang="scss">
.container {
  div,
  p,
  input {
    box-sizing: border-box;
  }
  .row {
    margin: 0 25rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .icon {
      width: 35rpx;
      height: 35rpx;
      position: absolute;
      left: 30rpx;
      top: 17rpx;
    }
    input {
      box-sizing: border-box;
      width: 620rpx;
      height: 70rpx;
      background: #f8f8f8;
      border-radius: 35rpx;
      padding: 15rpx 70rpx;
    }
    .text {
      font-size: 28rpx;
      color: #cfb685;
    }
    .history {
      border-left: 7rpx solid #000;
      font-size: 38rpx;
      padding-left: 30rpx;
      margin-top: 40rpx;
      margin-bottom: 20rpx;
      line-height: 39rpx;
    }
  }
  .tags {
    flex-wrap: wrap;
    justify-content: flex-start;
    .tag {
      margin-right: 20rpx;
      padding: 0 30rpx;
      height: 70rpx;
      border: 0.5rpx solid #6f6f6f;
      border-radius: 35rpx;
      text-align: center;
      line-height: 70rpx;
      font-size: 30rpx;
      margin-bottom: 20rpx;
      color: #6f6f6f;
    }
    .tagSelected {
      border: 0.5rpx solid #cdb27e;
      color: #cdb27e;
    }
  }
}
</style>
